import { useI18n } from '@/hooks/web/useI18n'
import { reactive, UnwrapRef } from 'vue'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { useValidator } from '@/hooks/web/useValidator'
import { ElButton, ElIcon, ElImage, ElTag } from 'element-plus'

const { t } = useI18n()
import { useTableDialogStore } from '@/store/modules/tableDialog'
import UseElSelectV2 from '../useElSelectV2/index.vue'
import { useEnumeratePicker } from '@/utils'
import UploadFile from '@/components/UploadFile/index.vue'
import { Plus } from '@element-plus/icons-vue'

const { required } = useValidator()

interface Option {
  label: string
  value: string | number // 具体取决于你的数据
}

const createOptions = (enumObject: { [key: string]: string }): Option[] => {
  return Object.keys(enumObject).map((key) => ({
    label: enumObject[key],
    value: parseInt(key, 10)
  }))
}
export default function (schemaConfig: any) {
  const tableDialogStore = useTableDialogStore(schemaConfig.tableDialogStoreID)
  const categoryOption = schemaConfig?.categoryList?.value || []
  const crudSchemas = reactive<CrudSchema[]>([
    {
      field: 'selection',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        type: 'selection'
      }
    },
    {
      field: 'id',
      label: t('attachment.id'),
      align: 'center',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'cname',
      label: t('attachment.name'),
      form: {
        component: 'Input',
        formItemProps: {
          rules: [required()]
        },
        colProps: {
          span: 12
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        width: 220
      }
    },
    {
      field: 'abbr',
      label: t('attachment.abbr'),
      form: {
        component: 'Input',
        formItemProps: {
          rules: [required()]
        },
        colProps: {
          span: 12
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        width: 160
      }
    },
    {
      field: 'product_name',
      label: '关联商品',
      form: {
        formItemProps: {
          slots: {
            default: (data: any) => {
              return (
                <div class="w-full flex items-center">
                  <UseElSelectV2 />
                  <ElButton
                    class="m-l-10px"
                    size="small"
                    type="primary"
                    plain
                    onClick={() => {
                      const { allSchemas } = useCrudSchemas(
                        schemaConfig.tableDialogCurdSchema ? schemaConfig.tableDialogCurdSchema : []
                      )
                      tableDialogStore.openDialog()
                      tableDialogStore.setSchema(allSchemas)
                    }}
                  >
                    {t('attachment.choose')}
                  </ElButton>
                </div>
              )
            }
          }
        }
      },
      search: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        hidden: true
      }
    },
    {
      field: 'photo',
      label: t('attachment.photo'),
      search: {
        hidden: true
      },
      form: {
        formItemProps: {
          rules: [required()],
          slots: {
            default: (data: any) => (
              <div class="flex flex-col">
                <UploadFile
                  url={'/common/uploadFile'}
                  fileType={['png', 'jpg', 'jpeg']}
                  params={{ directory: 2 }}
                  limit={9}
                  isSlot={true}
                  listType={'picture-card'}
                  fileListMap={data.photo_urls}
                  showFileList={true}
                  // @ts-ignore
                  uploadSuccessRes={({ fileList }: Record<string, any>) => {
                    const ids = fileList.map((item: any) =>
                      item.response ? item.response.data.id : item.id
                    )
                    schemaConfig.setValues({ photo: ids })
                  }}
                  // @ts-ignore
                  handleRemoveFile={(fileList: Record<string, any>) => {
                    const ids = fileList.map((item: any) =>
                      item.response ? item.response.data.id : item.id
                    )
                    schemaConfig.setValues({ ...data, photo: ids })
                  }}
                >
                  <ElIcon>
                    <Plus />
                  </ElIcon>
                </UploadFile>
                <div class="m-t-3 text-xs text-gray-800">最多上传 9 张图片</div>
              </div>
            )
          }
        }
      },
      detail: {
        slots: {
          default: (data: Record<string, any>) =>
            data.photo_urls
              ? data.photo_urls.map((item: any) => (
                  <ElImage
                    key={item.id}
                    src={item.url}
                    zoom-rate={1.2}
                    max-scale={7}
                    min-scale={2}
                    fit="cover"
                    class="photo_default m-r-4 cursor-pointer"
                    // @ts-ignore
                    onClick={() => {
                      const urlList = data.photo_urls.map((item: any) => item.url)
                      const index = data.photo_urls.findIndex((v: any) => v.id === item.id)
                      // @ts-ignore
                      createImageViewer({
                        urlList,
                        initialIndex: index
                      })
                    }}
                  />
                ))
              : null
        }
      },
      table: {
        hidden: true
      }
    },
    {
      field: 'sku',
      label: t('attachment.sku'),
      form: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        width: 220
      }
    },
    {
      field: 'code',
      label: t('attachment.code'),
      form: {
        component: 'Input',
        formItemProps: {
          rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        width: 220
      }
    },
    {
      field: 'category',
      label: t('attachment.category'),
      search: {
        component: 'TreeSelect',
        componentProps: {
          data: categoryOption,
          checkStrictly: true,
          filterable: true
        }
      },
      form: {
        component: 'TreeSelect',
        componentProps: {
          data: categoryOption,
          checkStrictly: true,
          filterable: true
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        width: 150,
        slots: {
          default: (data: any) => {
            return data.row.category_value
          }
        }
      },
      detail: {
        slots: {
          default: (data: any) => {
            return data.category_value
          }
        }
      }
    },
    {
      field: 'brand',
      label: t('attachment.brand'),
      search: {
        component: 'Select',
        componentProps: {
          options: schemaConfig.brandList,
          filterable: true
        }
      },
      form: {
        component: 'Select',
        componentProps: {
          options: schemaConfig.brandList
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        width: 150,
        slots: {
          default: (data: any) => {
            return useEnumeratePicker(schemaConfig.brandList.value, data.row.brand)
          }
        }
      },
      detail: {
        slots: {
          default: (data: any) => {
            return useEnumeratePicker(schemaConfig.brandList.value, data.brand)
          }
        }
      }
    },
    {
      field: 'color_specs',
      label: t('attachment.color_specs'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input'
      },
      table: {
        headerAlign: 'center',
        width: 150,
        align: 'center'
      }
    },
    {
      field: 'condition',
      label: t('attachment.condition'),
      search: {
        hidden: true
      },
      form: {
        component: 'Select',
        formItemProps: {
          rules: [required()]
        },
        componentProps: {
          options: [
            {
              label: t('product.conditionValue.1'),
              value: '1'
            },
            {
              label: t('product.conditionValue.0'),
              value: '0'
            }
          ]
        },
        value: '0'
      },
      table: {
        hidden: true
      },
      detail: {
        slots: {
          default: (data: any) => {
            return data.condition_text
          }
        }
      }
    },
    {
      field: 'expiration_date',
      label: t('attachment.expiration_date'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input'
      },
      table: {
        hidden: true
      }
    },
    {
      field: 'power',
      label: t('attachment.power') + '(W)',
      search: {
        hidden: true
      },
      form: {
        component: 'InputNumber'
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        width: 100
      }
    },
    {
      field: 'working_voltage',
      label: t('attachment.working_voltage'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input'
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        width: 120
      }
    },
    {
      field: 'noise_level',
      label: t('attachment.noise_level'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input'
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        width: 120
      }
    },
    {
      field: 'network_conn_method',
      label: t('attachment.network_conn_method'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input'
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        width: 120
      }
    },
    {
      field: 'operation_temperature',
      label: t('attachment.operation_temperature'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input'
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        width: 120
      }
    },
    {
      field: 'contain_battery',
      label: t('attachment.contain_battery'),
      search: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return (
              <ElTag type={data.row.contain_battery === 1 ? 'success' : 'warning'}>
                {t(`common.yes_or_no_value.${data.row.contain_battery}`)}
              </ElTag>
            )
          }
        },
        width: 100
      },
      detail: {
        slots: {
          default: (data: any) => {
            return (
              <ElTag type={data.contain_battery === 1 ? 'success' : 'warning'}>
                {t(`common.yes_or_no_value.${data.contain_battery}`)}
              </ElTag>
            )
          }
        }
      },
      form: {
        component: 'Select',
        componentProps: {
          options: [
            { label: '否', value: 0 },
            { label: '是', value: 1 }
          ]
        },
        value: 0, // 设置默认选中值为 '1'
        formItemProps: {
          rules: [required()]
        }
      }
    },
    {
      field: 'has_magnetic',
      label: t('attachment.has_magnetic'),
      search: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return (
              <ElTag type={data.row.has_magnetic === 1 ? 'success' : 'warning'}>
                {t(`common.yes_or_no_value.${data.row.has_magnetic}`)}
              </ElTag>
            )
          }
        },
        width: 100
      },
      detail: {
        slots: {
          default: (data: any) => {
            return (
              <ElTag type={data.has_magnetic === 1 ? 'success' : 'warning'}>
                {t(`common.yes_or_no_value.${data.has_magnetic}`)}
              </ElTag>
            )
          }
        }
      },
      form: {
        component: 'Select',
        componentProps: {
          options: [
            { label: '否', value: 0 },
            { label: '是', value: 1 }
          ]
        },
        value: 0, // 设置默认选中值为 '1'
        formItemProps: {
          rules: [required()]
        }
      }
    },
    {
      field: 'weight',
      label: t('attachment.weight'),
      search: {
        hidden: true
      },
      form: {
        component: 'InputNumber'
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        width: 120
      }
    },
    {
      field: 'gross_weight',
      label: t('attachment.gross_weight'),
      search: {
        hidden: true
      },
      form: {
        component: 'InputNumber'
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        width: 120
      }
    },
    {
      field: 'billing_weight',
      label: t('attachment.billing_weight'),
      search: {
        hidden: true
      },
      form: {
        component: 'InputNumber',
        formItemProps: {
          rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        width: 120
      }
    },
    {
      field: 'bare_macheine_size',
      label: t('attachment.bare_macheine_size'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input'
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'package_size',
      label: t('attachment.package_size'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input'
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'status',
      label: t('attachment.status'),
      search: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return (
              <ElTag type={data.row.status === 1 ? 'success' : 'warning'}>
                {t(`common.status_value.${data.row.status}`)}
              </ElTag>
            )
          }
        },
        width: 100
      },
      detail: {
        slots: {
          default: (data: any) => {
            return (
              <ElTag type={data.status === 1 ? 'success' : 'warning'}>
                {t(`common.status_value.${data.status}`)}
              </ElTag>
            )
          }
        }
      },
      form: {
        component: 'Select',
        componentProps: {
          options: [
            { label: '下架', value: 0 },
            { label: '上架', value: 1 }
          ]
        },
        value: 1, // 设置默认选中值为 '1'
        formItemProps: {
          rules: [required()]
        }
      }
    },
    {
      field: 'free_shipping',
      label: t('attachment.free_shipping'),
      search: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return (
              <ElTag type={data.row.free_shipping === 1 ? 'success' : 'warning'}>
                {t(`common.yes_or_no_value.${data.row.free_shipping}`)}
              </ElTag>
            )
          }
        },
        width: 100
      },
      detail: {
        slots: {
          default: (data: any) => {
            return (
              <ElTag type={data.free_shipping === 1 ? 'success' : 'warning'}>
                {t(`common.yes_or_no_value.${data.free_shipping}`)}
              </ElTag>
            )
          }
        }
      },
      form: {
        component: 'Select',
        componentProps: {
          options: [
            { label: '否', value: 0 },
            { label: '是', value: 1 }
          ]
        },
        value: 0, // 设置默认选中值为 '1'
        formItemProps: {
          rules: [required()]
        }
      }
    },
    {
      field: 'apply_rules',
      label: t('attachment.apply_rules'),
      search: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return (
              <ElTag type={data.row.apply_rules === 1 ? 'success' : 'warning'}>
                {t(`common.yes_or_no_value.${data.row.apply_rules}`)}
              </ElTag>
            )
          }
        },
        width: 100
      },
      detail: {
        slots: {
          default: (data: any) => {
            return (
              <ElTag type={data.apply_rules === 1 ? 'success' : 'warning'}>
                {t(`common.yes_or_no_value.${data.apply_rules}`)}
              </ElTag>
            )
          }
        }
      },
      form: {
        component: 'Select',
        componentProps: {
          options: [
            { label: '否', value: 0 },
            { label: '是', value: 1 }
          ]
        },
        value: 1, // 设置默认选中值为 '1'
        formItemProps: {
          rules: [required()]
        }
      }
    },
    {
      field: 'min_num',
      label: t('attachment.min_num'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        componentProps: {
          type: 'number'
        },
        value: 1
      },
      table: {
        hidden: true
      }
    },
    {
      field: 'is_merge_product',
      label: t('product.is_merge_product'),
      search: {
        component: 'Select',
        componentProps: {
          options: [
            {
              label: t('common.yes_or_no_value.0'),
              value: 0
            },
            {
              label: t('common.yes_or_no_value.1'),
              value: 1
            }
          ],
          clearable: true,
          placeholder: '请选择'
        }
      },
      form: {
        hidden: true
      },
      table: {
        hidden: true
      },
      detail: {
        hidden: true
      }
    },
    {
      field: 'is_have_inventory',
      label: t('product.is_have_inventory'),
      search: {
        component: 'Select',
        componentProps: {
          options: [
            {
              label: t('common.yes_or_no_value.0'),
              value: 0
            },
            {
              label: t('common.yes_or_no_value.1'),
              value: 1
            }
          ],
          clearable: true,
          placeholder: '请选择'
        }
      },
      form: {
        hidden: true
      },
      table: {
        hidden: true
      },
      detail: {
        hidden: true
      }
    },
    {
      field: 'describe',
      label: t('attachment.describe'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        componentProps: {
          type: 'textarea'
        }
      },
      table: {
        hidden: true
      }
    },
    {
      field: 'action',
      width: (schemaConfig.actionButtonsTemplate?.length || 3) * 60 + 20 + 'px',
      label: t('tableDemo.action'),
      fixed: 'right',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return schemaConfig.actionButtonsTemplate?.template(data) ?? null
          }
        }
      }
    }
  ])

  return {
    crudSchemas
  }
}
